<template>
	<h2>当前求和为：{{ sum }}</h2>
	<button @click="sum++">点我+1</button>
	<hr>
	<h2>{{ msg }}</h2>
	<button @click="msg+='!'">点我修改信息</button>
	<h2>姓名：{{ p.name }}</h2>
	<h2>年龄：{{ p.age }}</h2>
	<button @click="p.name+='~'">点我修改姓名</button>
	<button @click="p.age++">点我修改年龄</button>
</template>

<script>
	import {ref, watch,reactive} from 'vue'
	export default {
		name: 'D-Demo',
		setup(){
			let sum=ref(0)
			let msg=ref('Hello')
			let p=reactive({
				name:'Gui',
				age:21
			})

			//情况一：监视ref所定义的一个响应式数据
			//可以传入三个参数，第三个参数为配置项
			watch(sum,(newValue,oldValue)=>{
				console.log(newValue,oldValue)
			},{immediate:true})

			//情况二：监视ref所定义的多个响应式数据
			// watch(sum,msg,(newValue,oldValue)=>{
			// 	console(newValue,oldValue)
			// })

			//情况三：监视一个对象reactive
			//注意：此处无法正确获得reactive定义的oldValue的数据
			// watch(p,(newValue,oldValue)=>{

			// })


			//返回一个对象（常用）
			return {
				sum,
				msg,
				p
			}
		}
	}
</script>

